首先我們先做一個看起來好像有點一回事的Logo，如果你懶得做Logo，可以諮詢你的設計師並請他喝杯咖啡(然後付稿費)。這個單元會整理一下需要制定的項目，希望填完也就有個大概的成果了（？。

Design Guideline 懶人包

下載連結 (Adobe XD)

色盤：制訂你的主色與輔色

如果有需要可以自行擴充，例如Material UI 還細分成 main, light, dark三階。

文字：整理好文字級數

把文字的對比抓出來，才不會在整個系統有各種 font-size。

控制項

控制項的部分我區分為:

• Button：按鈕樣式。
• Input
  • Text Input：文字輸入匡，需要考慮各種狀態。
  • Select：下拉選單。
  • Radio：單選。
  • Checkbox：多選。
  • Switch：開關。
• Panels：區塊，統一如圓角，陰影等樣式。
• Feedback：回饋，統一回饋的操作，才不會讓使用者困惑，例如確認鈕固定左邊還是右邊等等。
• Spacing：定義最小單位的間距。

結果參考

填完上面的內容後看起來還滿有一回事的。如需更多細節，請洽您的UI設計師。

小結

在樣式建立完後，我們就有一個基本樣式能夠參考了，但是離開始建立組件還有一段距離，我們還需要定義樣式常數物件，例如 Input 的高度等等，會在接下來的單元來處理。